import React from 'react';
import {Card, Avatar, Badge, Row, Col, List} from 'antd';
import {
    BellOutlined,
    PlusOutlined,
    SearchOutlined,
    UserOutlined,
    CheckOutlined
} from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroller';
import '../WeChat/style.css';

let mockContact: any = [];
for (let i = 0; i < 9; i++) {
    mockContact.push({
        id: i,
        name: `Edward King ${i}`,
        howTimeAgo: '',
        tips: `[16 Messages] Welcome to our message`,
        show: true
    })
}

class WeContacts extends React.PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            data: mockContact,
            loading: false,
            hasMore: true,
            avatarIndex: null
        }
    }

    showItem = (index: number) => {
        const { avatarIndex } = this.state;
        if (avatarIndex === index) {
            this.setState({
                avatarIndex: false
            })
        } else {
            console.log(111);
            this.setState({
                avatarIndex: index
            })
        }
    };

    handleInfiniteOnLoad() {
        console.log(111);
    }


    renderProList() {
        const {loading, hasMore, data, avatarIndex} = this.state;
        return (
            <InfiniteScroll
                initialLoad={false}
                pageStart={0}
                loadMore={this.handleInfiniteOnLoad}
                hasMore={!loading && hasMore}
                useWindow={false}
            >
                <List
                    split={false}
                    bordered={false}
                    dataSource={data}
                    renderItem={(item: any, index: number) => (
                        <div
                            className='WeChatContactsItemBox'
                            key={item.id}

                            onClick={() => this.showItem(index)}>
                            {
                                avatarIndex === index && <div className='WeChatContactsAvatarTools' />
                            }
                            <Row key={item.id} className='WeChatContactsItem'>
                                <Col span={21}>
                                    <div className="avatarBox">
                                        <div>
                                            <Badge
                                                color="#64C8BC"
                                                size="small"
                                                count={<CheckOutlined style={{
                                                    color: "#fff",
                                                    border: "2px solid #fff",
                                                    background: "#64C8BC",
                                                    borderRadius: "50%"
                                                }}/>}
                                                offset={[-6, 38]}
                                                title="onLine"
                                            >
                                                <Avatar
                                                    size={44}
                                                    icon={<UserOutlined/>}
                                                />
                                            </Badge>
                                        </div>
                                        <div className="nameAndTipsWordBox">
                                            <div className="name">{item.name}</div>
                                            <div className="tipsWord">
                                                {item.tips}
                                            </div>
                                        </div>
                                    </div>
                                </Col>
                                <Col span={3}>
                                    <div className='howTimeAgoAndTipsIcon'>
                                        <div className="howTimeAgo">Just</div>
                                        <div className="tipsIcon"><BellOutlined/></div>
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    )}
                />
            </InfiniteScroll>
        )
    };

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return (
            <Card
                type='inner'
                style={{
                    width: '100%',
                    boxShadow: 'none',
                }}
                bodyStyle={{
                    padding: 0,
                    overflowX: 'hidden',
                    overflowY: 'auto',
                    height: 'calc(100vh - 66px)'
                }}
            >
                <div className="WeChatContactsHeader">
                    <div className="title">Chat</div>
                    <div className="iconBox">
                        <SearchOutlined/>
                        <PlusOutlined className="add"/>
                    </div>
                </div>
                {
                    this.renderProList()
                }
            </Card>
        )
    }
}


export default WeContacts;
